<template>
  <div class="adminHandle" >
    <div style="padding-top: 30px;padding-left: 10px">
      <el-form ref="form" :model="tableData" label-width="80px" @submit.native.prevent>
        <el-form-item style="background-color:#FFFFFFFF" label="学生姓名">
          <div >{{tableData.name}}</div>
        </el-form-item>
        <el-form-item style="background-color:#FFFFFFFF" label="学生学号">
          <div>{{tableData.number}}</div>
        </el-form-item>
        <el-form-item style="background-color:#FFFFFFFF" label="学生性别">
          <div>{{tableData.sex}}</div>
        </el-form-item>
        <el-form-item style="background-color:#FFFFFFFF" label="学生班别">
          <div>{{tableData.clazzid}}班</div>
        </el-form-item>
        <el-form-item style="background-color:#FFFFFFFF" label="学生手机">
          <div v-show="!isedit()">{{tableData.phone}}</div>
          <div  @keydown.enter="quitedit()"><el-input v-model="submit.phone" v-show="isedit()"></el-input></div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">确认修改</el-button>
          <el-button @click="toedit()">编辑</el-button>
          <el-button @click="quitedit()" v-show="isedit()">退出编辑</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'


  export default {
  name:"StudentInfoEdit",
  methods: {
    toedit(){
      this.timelyPhone = this.tableData.phone
      this.edit = 1
    },
    quitedit(){
      this.edit = 0
    },
    onSubmit(){
      this.edit = 0

      axios.defaults.headers.common["token"] = this.token;
      axios.put((this.ip + '/' + this.identity +'/'),JSON.stringify(this.submit),{headers:
          {'Content-Type':'application/json'}}).then((response)=>{
        console.log(response)
        console.log(response.data)
        this.tableData.phone = this.submit.phone
      }).catch(function (error) {
        console.log(error);
      });
    },
    isedit(){
      if(this.edit === 0){return false}
      else {return true}
    }
  },
  data() {
    return {
      submit:{
        number:'',
        phone:'',
      },

      tableData:{
        number:"2019091605022",
        name:"张三",
        sex:"男",
        phone:"18029251171",
        clazzid:"12"},
      edit:0,
    }
  },
    mounted(){
      this.ip = localStorage.getItem('ip');
      this.token = sessionStorage.getItem('token');
      this.identity = sessionStorage.getItem('identity')

      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/' + this.identity +'/msg')).then((response)=>{
        console.log(response)
        console.log(response.data)

        this.tableData.number = response.data.number
        this.tableData.name = response.data.name
        this.tableData.sex = response.data.sex
        this.tableData.clazzid = response.data.classId
        this.tableData.phone = response.data.phone

        this.submit.number = response.data.number
        this.submit.phone = response.data.phone
      }).catch(function (error) {
        console.log(error);
      });
    }
}
</script>

<style scoped>
.adminHandle{
  width: 100%;
  padding: 5px 10px 0px 10px;
  margin: 20px 100px 0px 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}
</style>
